Code mẫu JavaScript tạo biểu đồ/đồ thị hàm nối trục
Biểu đồ Spline trong CanvasJS tương tự như biểu đồ đường tuyến (Line Chart), nhưng các điểm dữ liệu được kết nối bằng các đường cong mượt mà, giúp thể hiện sự thay đổi một cách trơn tru hơn. Biểu đồ này không chỉ hữu ích mà còn rất đẹp mắt. Dưới đây là một ví dụ về biểu đồ spline cùng mã nguồn JavaScript có thể chỉnh sửa và chạy trực tiếp trong trình duyệt:
```html
window.onload = function() {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title: {
text: "Doanh số bán album nhạc hàng năm"
},
axisY: {
title: "Số bản đã bán",
valueFormatString: "0,,.",
suffix: "mn",
stripLines: [{
value: 3366500,
label: "Trung bình"
}]
},
data: [{
yValueFormatString: "Units",
xValueFormatString: "YYYY",
type: "spline",
dataPoints: [
{ x: new Date(2002, 0), y: 2506000 },
{ x: new Date(2003, 0), y: 2798000 },
{ x: new Date(2004, 0), y: 3386000 },
Đoạn mã HTML sau tạo biểu đồ hàm nối trục Spline Chart bằng CanvasJS:
```html
// Mã JavaScript để tạo biểu đồ sẽ ở đây
```
Biểu đồ có thể tùy chỉnh với các thuộc tính như `lineThickness` (độ dày đường), `lineColor` (màu đường), `markerSize` (kích thước đánh dấu) và có thể bật/tắt tính năng thu phóng với `zoomEnabled`. Hy vọng thông tin này hữu ích cho bạn!
Source: https://quantrimang.com/hoc/code-mau-javascript-tao-bieu-do-do-thi-ham-noi-truc-195136